<template>
  <div>
    <!-- 登录注册 -->
    <div class="main">
      <div :class="`content ${isShow?'login-in':''}`">
        <div class="content-forms">
          <div class="content-info">
            <div class="info-item">
              <div class="table">
                <div class="table-cell">
                  <p>已有账号？</p>
                  <span>有账号就登陆吧，好久不见了！</span>
                  <button class="info-btn" @click="showHide">登 录</button>
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="table">
                <div class="table-cell">
                  <p>还未注册？</p>
                  <span>立即注册，发现惊喜！</span>
                  <button class="info-btn" @click="showHide">注 册</button>
                </div>
              </div>
            </div>
          </div>
          <div class="content-form" >
            <div class="form-item login-in">
              <div class="table">
                <div class="table-cell">
                  <p>用户名</p>
                  <input type="text" name="Username" />
                  <p>密码</p>
                  <input type="password" name="Password" />
                  <button class="btn">登 录</button>
                </div>
              </div>
            </div>
            <div class="form-item sign-up">
              <div class="table">
                <div class="table-cell">
                  <p>邮箱</p>
                  <input type="text" name="email" />
                  <p>用户名</p>
                  <input type="text" name="Username" />
                  <p>密码</p>
                  <input type="password" name="Password" />
                  <button class="btn">注 册</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false
        }
    },
    methods: {
        showHide() {
            this.isShow = !this.isShow
        }
    },
};
</script>

<style coped>
.table {
  display: table;
  height: 100%;
  width: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  transform: all 0.5s;
}

.main {
  padding: 10px;
  width: 100%;
  height: calc(100vh - 100px - 83px);
  background-image: url('../../assets/img/login/bg_1.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
}

.content {
  position: relative;
  width: 700px;
  margin: 70px auto 0;
  height: 420px;
  background-color: rgba(112, 91, 74, 0.8);
  transition: all 0.5s;
}

.btn,
.info-btn {
  height: 40px;
  display: block;
  border: none;
  text-align: center;
  margin: 0 auto;
  padding: 5px 10px;
  border-radius: 20px;
}

.btn {
  color: #fff;
  width: 250px;
  background-color: #7a5b4a;
}

.info-btn {
  width: 100px;
  border: 1px solid #fff;
  color: #fff;
  background-color: transparent;
}

.btn:hover {
  opacity: 0.7;
}

.info-btn:hover {
  background-color: #fff;
  color: #7a5b4a;
}

.btn,
input {
  padding: 10px 15px;
}

input {
  margin: 0 auto 15px;
  display: block;
  width: 250px;
  border: none;
  border-bottom: 1px solid rgba(112, 91, 74, 0.5);
  text-align: center;
}

.content-info {
  font-size: 0;
}

.info-item {
  text-align: center;
  width: 350px;
  height: 420px;
  display: inline-block;
  color: #fff;
}

.info-item p {
  font-size: 20px;
  margin: 20px;
}

.info-item span {
  display: block;
  font-size: 14px;
  margin-bottom: 40px;
}

.info-item .btn {
  background-color: transparent;
  border: 1px solid #fff;
}

.info-item .table-cell {
  padding-right: 35px;
}

.info-item:nth-child(2) .table-cell {
  padding-left: 35px;
  padding-right: 0;
}

.content-form {
  overflow: hidden;
  position: absolute;
  left: 30px;
  top: -30px;
  width: 355px;
  height: 480px;
  background-color: #fff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.5s;
}

.content-form .btn {
  margin-top: 55px;
}

.form-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  display: inline-block;
  transition: all 0.5s;
}

.form-item p {
  text-align: center;
  width: 50px;
  margin: 0 auto 10px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

.form-item.sign-up {
  position: absolute;
  left: -100%;
  opacity: 0;
}

.content.login-in .content-form {
  left: 315px;
}

.content.login-in .content-form .form-item.sign-up {
  left: 0;
  opacity: 1;
}

.content.login-in .content-form .form-item.login-in {
  top: -100%;
  opacity: 1;
}

</style>